import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View, Button, Image, TouchableHighlight,
    TextInput, Alert
} from 'react-native';
import DeviceRn from '../../components/Tools/device';
import Http from '../../components/Tools/http.unite';
import Toast, { DURATION } from 'react-native-easy-toast';
let DevWH = DeviceRn().getWidHig();
export default class SettingScreen extends Component {
    static navigationOptions = ({ navigation, screenProps }) => (
        {
            title: '设置',
            headerStyle: {
                paddingLeft: 4,
                backgroundColor: screenProps.header,
                borderBottomColor: '#eee',
                borderBottomWidth: 1
            },
            headerTintColor: screenProps.color,
            headerTitleStyle: {
                color: screenProps.color,
            },
        });

    componentWillUnmount() {
        this.time = null;
    }

    constructor(props) {
        super(props);
        this.theme = this.props.screenProps;
    }

    _rendItem(txt, msg) {
        return (
            <TouchableHighlight underlayColor="#fff" style={styles.clear} activeOpacity={0.85} onPress={() => this._itemClick(msg)}>
                <Text style={styles.clear_txt}>{txt}</Text>
            </TouchableHighlight>
        );
    }

    _rendUpdate(txt, msg) {
        return (
            <TouchableHighlight underlayColor="#fff" style={styles.clear} activeOpacity={0.85} onPress={() => this._itemClick(msg)}>
                <View style={{width:DevWH.sW, flexDirection: 'row'}}>
                    <Text style={[styles.clear_txt,{flex:1}]}>{txt}</Text>
                    <Text style={[styles.clear_txt,styles.txt_right,{flex:.6}]}>当前版本：0.0.1</Text>
                </View>
            </TouchableHighlight>
        );
    }

    _itemClick(msg) {
        switch (msg) {
            case 'clear':
                this.removeStorage();
                break;
            case 'update':
                this.update();
                break;
        }
    }

    render() {
        return (
            <View style={[styles.contain, styles.align]}>
                {this._rendItem('清除缓存', 'clear')}
                <Toast ref="toast" position="center" />
                {this._rendUpdate('软件升级', 'update')}
                
            </View>
        );
    }

    removeStorage() {
        let { goBack } = this.props.navigation;
        Alert.alert('提示', '是否清除所有缓存数据？', [
            {
                text: '是', onPress: () => {
                    DeviceRn().storageClear().then(data => {
                        this.refs.toast.show('清除成功');
                        this.time = setInterval(() => {
                            clearInterval(this.time);
                            goBack();
                        }, 500);
                    }).catch(err => {
                        this.refs.toast.show('清除失败，请重试');
                    })
                }
            },
            {
                text: '否', onPress: () => {
                    this.refs.toast.show('取消');
                }
            },
        ]);
    }

    update() {
        this.refs.toast.show('已经是最新版本');
    }
};
const styles = StyleSheet.create({
    contain: {
        flex: 1,
        backgroundColor: '#fff',
    },
    align: {
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
    },
    clear: {
        flex: 0,
        width: DevWH.sW,
        height: 50,
        justifyContent: 'center',
        alignItems: 'flex-start',
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
        marginBottom: 10,
        backgroundColor: '#fff'
    },
    clear_txt: {
        marginLeft: 20,
        fontWeight: '500',
        color: '#222'
    },
    txt_right: {
        fontWeight: '300',
        color: '#666',
    }
});